<script setup>
import { useUserStore, useTokenStore, useRoutersStore } from '@/stores';
import { ref } from'vue';
import { useRouter } from 'vue-router';

const props = defineProps({
    isCollapse:{
        type:Boolean,
    }
})

const userStore = useUserStore()

const emits = defineEmits(['update:isCollapse'])

const hanldeChangeCollapse=()=>{
    emits('update:isCollapse',!props.isCollapse)
}

const router = useRouter();
const tokenStore = useTokenStore()
const routerStore = useRoutersStore()
const handleCommand= async(ev) => {
    if(ev === 'logout'){
        await routerStore.clearRouters()
        await tokenStore.clearToken()
        await userStore.clearUser()
        router.push({ name: "Login" });
    }
}

</script>

<template>
    <div class='nav'>
        <div class="content">
            <el-icon v-if="!props.isCollapse" class="but_css" @click="hanldeChangeCollapse">
                <Fold style="width: 100%;height: 100%;"/>
            </el-icon>
            <el-icon v-else class="but_css" @click="hanldeChangeCollapse">
                <Expand style="width: 100%;height: 100%;"/>
            </el-icon>
        </div>
        <div class="content" style="width: 120px;">
            <el-dropdown @command="handleCommand($event)">
                <span class="el-dropdown-link" style="display: flex;justify-content: space-between;align-items: center;">
                    <div style="width: 45px;height: 100%;">
                        <el-image style="width: 100%; height: 100%;border-radius: 20%;" :src="userStore.user.avatar" fit="cover" />
                    </div>
                    <div style="display: flex;height: 100%;margin-left: 5px;padding-bottom: 2px;flex-direction: column;justify-content: space-between;">
                        <div style="width: 45px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px;padding-top: 8px;text-align: center;">
                            {{ userStore.user.name }}
                        </div>
                        <div style="text-align: center;">
                            <el-icon><CaretBottom /></el-icon>
                        </div>
                    </div>
                </span>
                <template #dropdown>
                <el-dropdown-menu>
                    <!-- <el-dropdown-item>个人中心</el-dropdown-item> -->
                    <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<style scoped lang='scss'>
.nav{
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;

   .content{
        width: 45px;
        height: 45px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 5px;
        .but_css{
            width: 50%;
            height: 50%;
            cursor: pointer;
        }
   }
}

.el-tooltip__trigger:focus-visible {
    outline: unset;
}
</style>